<template>
  <div>
    <BasicTable
      :title="vbenTableTitle"
      :columns="vbenTableColumns"
      :dataSource="vbenTableData"
      size="small"
      :bordered="true"
    >
      <!-- 自定义筛选列的编辑图标、查看操作日志图标 -->
      <template #customFilterIcon="{ filtered, column }">
        <Tooltip title="编辑参数项">
          <Tag color="blue" @click="openEditForm(column)">
            <EditOutlined />
          </Tag>
        </Tooltip>

        <Tooltip title="查看操作日志">
          <Tag @click="openObjOrParamValueLog(column.customTitle, column.dataIndex, null)">
            <EyeOutlined :style="{ color: '#009999' }" />
          </Tag>
        </Tooltip>
      </template>
      <!-- 自定义筛选列的筛选内容，此处不使用，但要写出来，不在里面编写交互界面（不写出来点击编辑图标时会正常弹出筛选界面，此处不需要筛选功能） -->
      <template
        #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
      ></template>

      <!-- 点击参数值事件 -->
      <template #objColumnRender="{ record }">
        <Tooltip title="点击查看操作日志">
          <span
            style="cursor: pointer"
            @click="openObjOrParamValueLog(record.paramName, record.objectid, record.paramCode)"
            >{{ record[record.objectid] }}</span
          >
        </Tooltip>
        <!-- <span>{{ record[record.objectid] }}&nbsp;&nbsp;</span>
        <Tooltip title="查看操作日志">
          <Tag @click="openObjOrParamValueLog(record.paramName, record.objectid, record.paramCode)">
            <EyeOutlined :style="{ color: '#009999' }" />
          </Tag>
        </Tooltip> -->
      </template>
    </BasicTable>
    <editForm @register="registerEditForm" @success="opSuccess" />
    <paramValueLog @register="registerLogTable" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, onBeforeMount, onUnmounted } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { useRouter } from 'vue-router';
  import { EditOutlined, EyeOutlined } from '@ant-design/icons-vue';

  import { queryParamGroupValues } from '/@/api/platform/paramValue';

  import { useModal } from '/@/components/Modal';
  import { OperationTypeEnum } from '/@/enums/appEnum';

  import editForm from './editForm.vue';
  import paramValueLog from './ParamValueLog.vue';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { Tag } from 'ant-design-vue';
  import { Tooltip } from 'ant-design-vue';

  const [registerEditForm, { openModal: openEditFormModal }] = useModal();
  const [registerLogTable, { openModal: openLogTableModal }] = useModal();

  export default defineComponent({
    name: 'ParamValueIndex',
    components: {
      EditOutlined,
      EyeOutlined,
      BasicTable,
      editForm,
      paramValueLog,
      Tag,
      Tooltip,
    },
    //要再setup函数中获取或使用props，需要在setup函数中获取props对象
    setup() {
      const router = useRouter();
      const groupCode = ref<String>('');
      const vbenTableTitle = ref<string>('参数值表格');
      const vbenTableColumns = ref([]);
      const vbenTableData = ref([]);
      const data = ref({});

      /**
       * 查询指定参数分组的参数值
       */
      function getParamGroupValuesData() {
        queryParamGroupValues(groupCode.value)
          .then((res) => {
            console.log('getParamGroupValuesData res', res);
            let tableColumns = [];
            let tableData = [];
            if (res != undefined && res != null) {
              data.value = res;
              console.log('data数据', data.value);
              //表格标题显示为参数分组名称
              vbenTableTitle.value = res.group.name;
              //根据查询的参数值结果对象，生成表格显示的列和行信息
              //对象作为列，第一列显示参数名称
              if (res.objs != undefined && res.objs != null && res.objs.length > 0x0) {
                let tablecolumn = {
                  title: '参数名称',
                  dataIndex: 'paramName',
                };
                tableColumns.push(tablecolumn);
                res.objs.forEach((obj) => {
                  let tablecolumn = {
                    title: obj.objname,
                    dataIndex: obj.objcode,
                    customFilterDropdown: true, //开启自定义筛选项，表格列增加编辑icon功能
                    slots: { customRender: 'objColumnRender' },
                  };
                  tableColumns.push(tablecolumn);
                });
                //逐个参数作为数据行
                if (res.items != undefined && res.items != null && res.items.length > 0x0) {
                  res.items.forEach((paramItem) => {
                    //第1列显示参数名称，从第2列开始遍历对象生成
                    let paramCode = paramItem.itemcode;
                    let dataRow = {
                      paramName: paramItem.unit
                        ? paramItem.name + ('(' + paramItem.unit + ')')
                        : paramItem.name,
                      description: paramItem.description ? paramItem.description : '',
                      paramCode: paramCode,
                    };

                    res.objs.forEach((obj) => {
                      let objCode = obj.objcode;
                      let objParamValue = '';
                      if (obj.values != undefined && obj.values != null) {
                        objParamValue = obj.values[paramCode];
                      }
                      dataRow[objCode] = objParamValue;
                      dataRow.objectid = objCode;
                    });

                    console.log('dataRow', dataRow);

                    tableData.push(dataRow);
                  });
                }
              }
            }

            console.log('getParamGroupValuesData tableColumns', tableColumns);
            console.log('getParamGroupValuesData tableData', tableData);
            vbenTableColumns.value = tableColumns;
            vbenTableData.value = tableData;
          })
          .catch((ex) => {
            console.log('getParamGroupValuesData ex', ex);
          });
      }

      onBeforeMount(() => {
        console.log('ParamValue Index.vue onBeforeMount');
        //从router.fullPath中获取传入的参数，并对空元素进行去除
        let paramGroupCode = '';
        let fullPathArray = router.currentRoute.value.fullPath.split('/');
        if (fullPathArray != undefined && fullPathArray != null && fullPathArray.length > 0x0) {
          let notEmptyPathArray = fullPathArray.filter((str) => str.length > 0x0);
          if (
            notEmptyPathArray != undefined &&
            notEmptyPathArray != null &&
            notEmptyPathArray.length > 0x0
          ) {
            //取最后一个元素作为参数分组
            paramGroupCode = notEmptyPathArray[notEmptyPathArray.length - 1];
          }
        }
        groupCode.value = paramGroupCode;
        //查询参数分组的参数值
        getParamGroupValuesData();
      });
      onUnmounted(() => {
        console.log('ParamValue Index.vue onUnmounted');
      });

      /**
       * 打开列对象编辑参数弹窗
       * @param column 当前列表头信息
       */
      function openEditForm(column) {
        console.log('打开编辑弹窗表头属性', column);
        openEditFormModal(true, {
          op: OperationTypeEnum.EDIT,
          groupCode: groupCode.value,
          paramData: data,
          objCode: column.dataIndex,
          objName: column.customTitle,
        });
      }

      /**
       * 打开参数项日志弹窗界面
       * @param objectid 对象ID/编码
       * @param paramid 参数编码
       * @param paramName 参数名称 作弹窗名称
       */
      function openObjOrParamValueLog(paramName, objectid, paramid) {
        // console.log('分组编码', groupCode.value);
        // console.log('对象编码', objectid);
        // console.log('参数编码', paramid);
        let propsData: QcUnifyTransToChildProps = {
          moduleName: paramName,
          operateType: OperationTypeEnum.LOG,
          dataId: { groupCode: groupCode.value, objCode: objectid, paramId: paramid },
        };
        openLogTableModal(true, propsData);
      }

      /**
       * 子组件操作完成后刷新表格数据
       */
      function opSuccess() {
        getParamGroupValuesData();
      }

      return {
        vbenTableTitle,
        vbenTableColumns,
        vbenTableData,
        openEditForm,
        registerEditForm,
        openObjOrParamValueLog,
        opSuccess,
        registerLogTable,
      };
    },
  });
</script>
<style scoped lang="less"></style>
